<template>
	<div class="sl_loading_canvas__container">
    <canvas ref="canvas" :width="width" :height="width" :style="HandleCanvasSly"></canvas>
  </div>
</template>

<script>
  export default {
    name: 'sl-loading-canvas',
    data () {
      return {
        countDown: 0
      }
    },
    props: {
      width: {
        type: [String, Number],
        default: '200'
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.init()
      })
    },
    computed: {
      HandleCanvasSly () {
        let sly = {
          transform: `translate(-50%, -50%) rotate(${this.countDown}deg)`
        }
        return sly
      }
    },
    methods: {
      init () {
        let canvas = this.$refs.canvas
        if (!canvas) return false
        let ctx = canvas.getContext('2d')
  
        // 绘制一个圆-背景
        ctx.beginPath()
        ctx.strokeStyle = '#ddd'
        ctx.arc(this.width/2, this.width/2, (this.width/2)-10, 0 , 2 * Math.PI, false)
        ctx.stroke()
        ctx.closePath()
        
        // 绘制一个圆-动画
        ctx.beginPath()
        ctx.strokeStyle = '#000'
        ctx.arc(this.width/2, this.width/2, (this.width/2)-10, 0 , .9 * Math.PI, true)
        ctx.stroke()
        ctx.closePath()
  
        // 绘制一个点-动画
        ctx.beginPath()
        ctx.fillStyle = '#000'
        ctx.arc(this.width - 10, this.width/2, 5, 0 , 2 * Math.PI, false)
        ctx.fill()
        ctx.stroke()
        ctx.closePath()
        
        this.animate()
      },
      animate () {
        setInterval(() => {
          this.countDown += 1
        }, 1)
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
 .sl_loading_canvas__container
    position relative
    height 100%
   canvas
     position relative
     left 50%
     top 45%
    
</style>
